<template>
  <div id="menuConfiguration">
    <el-card class="box-card">
      <template #header>
        <div class="card-header" @click="backChange">
          <el-icon size="20">
            <ArrowLeft />
          </el-icon>
          <div>直播详情</div>
        </div>
      </template>
      <div class="main">
        <el-main class="containner">
          <div class="imgbox">
            <img :src="detailArr.cover" />
          </div>
          <div class="right_box">
            <div class="title">{{ detailArr.name }}</div>
            <ul>
              <li class="item">直播院校： {{ detailArr.school }}</li>
              <li class="item">直播老师： {{ detailArr.teacher }}</li>
              <li class="item">卫视编导、制片人</li>
              <li class="item">直播时间： {{ detailArr.time }}</li>
              <li class="item">
                直播状态：
                {{
                  detailArr.status == 1 ||
                  detailArr.status == 2 ||
                  detailArr.status == 3
                    ? '回放中'
                    : ''
                      ? '即将开始'
                      : ''
                        ? '直播中'
                        : ''
                }}
              </li>
              <li class="item">
                <el-button class="primary" @click="shareBtn" type="primary"
                  >分享</el-button
                >
              </li>
            </ul>
          </div>
        </el-main>

        <div class="footer">
          <div class="introduction">直播简介:</div>
          <div class="content">{{ detailArr.blurb }}</div>
        </div>
      </div>
      <dialogShare
        v-model:showDialog="showDialog"
        :detailArr="detailArr"
        @downloadPoster="downloadPoster"
      >
      </dialogShare>
      <dialogPoster
        v-model:showDialogPoster="showDialogPoster"
        :deafultImg="posterArr"
      ></dialogPoster>
    </el-card>
  </div>
</template>

<script setup>
// import Dialog from "@/components/Dialog/Dialog.vue"
import dialogShare from '@/views/liveBroadcast/broadcastList/coomponents/dialogShare';
import dialogPoster from '@/views/liveBroadcast/broadcastList/coomponents/dialogPoster';

import { detail, liveAuto } from '@/api/liveAuto/index';
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { DEAFULT_IMG_LIST, uniqueArr } from '../hrlper';
const router = useRouter();
const route = useRoute();
const showDialogPoster = ref(false);
const tableData = ref([]);
const detailArr = ref({});
const showDialog = ref(false);
const backChange = () => {
  router.push({ path: 'broadcastList' });
};
let params = ref({
  id: '',
  page: 1,
  pageSize: 10,
});
const posterArr = ref([]);
// 详情数据
const detailInti = () => {
  const arr = [];
  detail(params.value).then((res) => {
    detailArr.value = res.data;
    arr.push({
      poster: res.data.poster,
      id: res.data.id,
    });
    const result = [...arr, ...DEAFULT_IMG_LIST];
    posterArr.value = uniqueArr(result);
  });
};
const shareBtn = () => {
  showDialog.value = true;
};

const downloadPoster = () => {
  showDialog.value = false;
  showDialogPoster.value = true;
};
// 直播列表
const liveList = () => {
  liveAuto(params.value).then((res) => {
    tableData.value = res.data.data;
  });
};

onMounted(() => {
  params.value.id = route.query.id;
  detailInti();
  liveList();
});
</script>

<style lang="scss" scoped>
:deep(.el-range-editor.el-input__wrapper) {
  height: 40px;
}

:deep(.el-button) {
  height: 40px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

  .main {
    width: 860px;
    margin: 0 auto;
  }

  .containner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 40px;

    .imgbox {
      width: 400px;
      height: 225px;
      margin-right: 40px;
      margin-bottom: 40px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .right_box {
      .title {
        margin-bottom: 20px;
        line-height: 34px;
        font-size: 30px;
        font-weight: 700;
        color: #333;
      }

      .item {
        line-height: 30px;
        font-size: 16px;
        color: #606266;

        .primary {
          width: 170px;
        }
      }
    }
  }

  .footer {
    display: flex;
    flex-direction: column;
    justify-content: left;

    .introduction {
      font-size: 16px;
      color: #606662;
      padding-bottom: 20px;
    }

    .content {
      font-size: 16px;
      line-height: 28px;
      font-weight: 400;
      color: #333;
    }
  }

  .webLinkBx {
    height: 190px;

    .link {
      margin-bottom: 20px;

      .linktxt {
        display: inline-block;
        color: rgb(134, 144, 156);
        font-size: 14px;
        margin-bottom: 5px;
      }

      .linkurl {
        display: inline-block;
        width: 265px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: rgb(29, 33, 41);
      }

      .code {
        color: #165dff;
        cursor: pointer;
        font-size: 14px;
        margin-left: 10px;
      }
    }

    .rightBox {
      text-align: center;
      border-left: 1px solid #e5e6eb;

      .codeTitle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: rgb(29, 33, 41);
        font-size: 16px;
        margin-bottom: 15px;
      }

      .codeTxt {
        margin-top: 5px;
        font-family: Inter-Regular, Inter;
        font-weight: 400;
        color: #165dff;
        line-height: 20px;
        cursor: pointer;
      }
    }
  }

  .bgBox {
    display: flex;

    justify-content: space-between;

    .bgBoxLeft {
      position: relative;
      width: 150px;
      max-height: 460px;
      overflow: hidden;
      overflow-y: auto;
      margin-right: 2px;

      .Check {
        color: #fff;
        position: absolute;
        top: 0;
        right: 0;
      }

      .img {
        width: 140px;
        cursor: pointer;
        margin-bottom: 16px;
      }

      .img.active {
        border: 2px solid #165dff;
      }
    }

    .bgBoxRight {
      width: 650px;
      background: #f2f3f5;
      border-radius: 0 0 8px 0;
      flex-direction: column;
      position: relative;

      .bgBoxRight_pic {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 375px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .download {
          margin-top: 0;
        }

        .img {
          width: 375px;
          overflow: hidden;
          overflow-y: auto;
          max-height: 400px;
          margin-top: 2px;

          img {
            width: 375px;
            height: 100%;
          }
        }
      }
    }
  }

  .infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
  }

  .infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
  }
}
</style>
